<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            #cont{width:500px;height:300px;overflow: hidden;position:relative;float:left;}
            .imga img{width:100%;height:100%;}
            .imga{float:left;width:500px;height:300px;}
            #imgs{width:5000px;position:absolute;}
            .buttons{width:40px;height:40px;background:rgba(0,0,0,0.6);position:absolute;font-size:20px;text-decoration:none;color:#fff;line-height:40px;text-align:center;}
            #butr{right:10px;bottom:10px;}

            #butc{left:230px;bottom:10px;font-size:40px;}
            #box{left:230px;bottom:50px;}
            .but{width:500px;height:40px;position: absolute;bottom:0px;}
            .bgh{width:500px;height:300px;position: relative;}
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var cont = document.getElementById('cont');
                var imgs = document.getElementById('imgs');
                var butr = document.getElementById('butr');
                var butl = document.getElementById('butl');
                var timer;//定时器
                var speed = -1;//默认速度
                play();//开始播放

                butr.onclick = function(){//右按钮，右移
                    stop();
                    //speed = -3;
                    setTimeout(function(){
                        speed = 2;//设置2倍速
                        play();
                    }, 500)
                    
                }

                butc.onclick = function(){
                    stop();
                    setTimeout(function(){
                        speed = -1;//还原默认速度
                        play();
                    }, 500)
                }

                butl.onclick = function(){//左按钮，左移
                    stop();//暂停半秒
                    setTimeout(function(){
                        speed = -2;//设置2倍速
                        play();//开始播放
                    }, 500)
                }

                /*Auto自动播放*/
                function play(){
                    timer = setInterval(function (){//每隔30毫秒执行一次函数，无限循环
                        imgs.style.left = imgs.offsetLeft + speed + 'px';//改变left值
                        if(imgs.offsetLeft > 0){//无限循环
                            imgs.style.left = -2000 + 'px';
                        }
                        if(imgs.offsetLeft < -2000){
                            imgs.style.left = 0 + 'PX';
                        }
                    }, 30);
                }

                function stop(){//停止循环
                    clearInterval(timer);
                }
                cont.onmouseover = stop;//鼠标覆盖则停止
                cont.onmouseout = play;//鼠标移开则开始
                
            }
        </script>
    </head>
    <body>
    <div class="bgh">
        <div id="cont">
            <div id="imgs" style="left:0px;">
                <a href="#"  class="imga"><img src="01.jpg" alt="01.jpg" /></a>
                <a href="#" class="imga"><img src="02.jpg" alt="02.jpg" /></a>
                <a href="#" class="imga"><img src="03.jpg" alt="03.jpg" /></a>
                <a href="#" class="imga"><img src="04.jpg" alt="04.jpg" /></a>
                <a href="#" class="imga"><img src="05.jpg" alt="05.jpg" /></a>
            </div>
        </div>
        <div class="but">
            <a href="javascript:;" class="buttons" id="butr">→</a>
            <a href="javascript:;" class="buttons" id="butc">·</a>
            <a href="javascript:;" class="buttons" id="butl">←</a>
        </div>
    </div>
    </body>
</html>